<template>
  <div class="picker-msg-wrap">
    <Field
      readonly
      v-on="$listeners"
      v-bind="$attrs"
      v-model="val"
      :rules="$attrs.rules"
      :class="{ required: isRequired }"
      :disabled="disabled"
    >
      <template #input>
        <input
          @click="inputClick"
          type="text"
          :placeholder="$attrs.placeholder"
          v-model="label"
          readonly
          class="van-field__control"
        />
        <Icon name="arrow" class="arrow" />
      </template>
      <template #label>
        <span>{{ $attrs.label }}</span>
        <Popover
          v-if="popover"
          v-model="showPopover"
          placement="top-start"
          theme="dark"
          trigger="click"
        >
          <div class="popover-inner">{{ popover }}</div>
          <template #reference>
            &nbsp;<Icon name="question-o" />
          </template> </Popover
      ></template>
    </Field>
    <Popup v-model="isShow" round position="bottom">
      <template v-if="type === 'area'">
        <Area
          :title="$attrs.label"
          :area-list="areaList"
          @confirm="onConfirm"
          @cancel="isShow = false"
          :disabled="disabled"
        ></Area>
      </template>
      <cascader
        v-else-if="type == 'cascader'"
        title="请选择所在地区"
        :options="columns"
        @close="isShow = false"
        @finish="onConfirm"
        :field-names="{ text: keyLabel, value: keyValue, children: 'children' }"
      />
      <Picker
        v-else
        :disabled="disabled"
        :title="$attrs.label"
        show-toolbar
        :columns="columns"
        v-on="$listeners"
        v-bind="$attrs"
        @confirm="onConfirm"
        @cancel="isShow = false"
        :value-key="keyValue"
        ref="picker"
      >
        <template #option="option">
          {{ option[keyLabel] }}
        </template>
      </Picker>
    </Popup>
  </div>
</template>
<script>
import { Field, Picker, Popup, Area, Icon, Cascader, Popover } from "vant";
import { areaList } from "@vant/area-data";
export default {
  props: {
    type: {
      default: "",
    },
    value: {
      default: "",
    },
    columns: {
      default: () => [],
    },
    keyLabel: {
      default: "label",
    },
    keyValue: {
      default: "value",
    },
    allField: {
      default: false,
    },
    symbol: {
      default: " / ",
    },
    disabled: {
      default: false,
    },
    popover: {
      default: "",
    },
  },
  name: "selectInfo",
  data() {
    return {
      showPopover: false,
      isShow: false,
      areaList,
      label: "",
    };
  },
  components: { Field, Picker, Popup, Area, Icon, Cascader, Popover },
  computed: {
    isRequired() {
      let rules = this.$attrs.rules;
      if (rules && rules.find((v) => v.required)) return true;
      return false;
    },
    val: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("valueChange", val);
      },
    },
  },
  model: {
    prop: "value",
    event: "valueChange",
  },
  watch: {
    columns(val) {
      let oldval = this.val;
      this.val = "";
      if (val?.length) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.$set(this, "val", oldval);
          }, 0);
        });
      }
    },
    val: {
      immediate: true,
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            setTimeout(() => {
              if (this.type === "area") {
                if (this.allField) {
                  this.label = String(val)
                    .split(",")
                    .map((key, index) => {
                      if (index === 0) {
                        return areaList.province_list[key];
                      } else if (index === 1) {
                        return areaList.city_list[key];
                      } else if (index === 2) {
                        return areaList.county_list[key];
                      }
                    })
                    .join("/");
                } else {
                  this.label = areaList.county_list[val];
                }
              } else {
                if (String(val).indexOf(",") && this.allField) {
                  this.label = String(val)
                    .split(",")
                    .map((v) => {
                      return this.$searchPropertyValue(
                        this.columns,
                        this.keyValue,
                        v
                      )?.[this.keyLabel];
                    })
                    .join(this.symbol);
                } else {
                  this.label = this.$searchPropertyValue(
                    this.columns,
                    this.keyValue,
                    val
                  )?.[this.keyLabel];
                }
              }
            }, 0);
          });
        } else {
          this.label = "";
        }
      },
    },
  },
  mounted() {},
  methods: {
    inputClick() {
      if (!(this.disabled || this.disabled === "")) {
        this.isShow = true;
      }
      // this.disabled || this.disabled === "" ? () => {} : (this.isShow = true);
      this.$emit("clickInput");
    },
    onConfirm(val) {
      if (val?.disabled) return (this.label = "");
      if (val instanceof Array) {
        if (this.type === "area") {
          if (this.allField) {
            this.val = val.map((v) => v.code).join(",");
          } else {
            this.val = val[val.length - 1]?.code;
          }
        } else {
          if (this.allField) {
            this.val = val.join(",");
          } else {
            this.val = val[val.length - 1];
          }
        }
      } else {
        if (this.type === "cascader") {
          if (this.allField) {
            this.val = val.selectedOptions
              .map((v) => v?.[this.keyValue])
              .join(",");
          } else {
            this.val = val.value;
          }
        } else {
          this.val = val?.[this.keyValue] || "";
        }
      }
      // this.label = val.label;
      this.isShow = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.picker-msg-wrap {
  position: relative;
  &::after {
    position: absolute;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    content: " ";
    pointer-events: none;
    right: 16px;
    bottom: 0;
    left: 16px;
    border-bottom: 1px solid #ebedf0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
}
</style>
